<!-- 添加迭代页面 -->
<template>
  <div>
    <div class="person-info">
      <div class="taskForm">
        <div>
          <select-down :columns="ownExecutionList" :value="iteration.ownExecution" :label-name="'所属执行'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="taskTypeList" :value="iteration.taskType" :label-name="'任务类型'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="ownModuleList" :value="iteration.ownModule" :label-name="'所属模块'" @changeValue="changeValue" />
        </div>
        <div>
          <select-down :columns="assignedToList" :value="iteration.assignedTo" :label-name="'指派给'" @changeValue="changeValue" />
        </div>
        <div class="moreStyle">
          <van-field v-model="iteration.taskName" class="basicClass" label="任务名称" placeholder-style="color:#999;" placeholder="请输入" type="input" @change="iteration.taskName = $event.detail" />
        </div>
        <div class="taskSty moreStyle">
          <div>任务描述</div>
          <div>
            <van-field v-model="iteration.taskDescript" label="自我评价" class="evaluate" placeholder-style="color:#999;" autosize type="textarea" placeholder="请输入" @change="iteration.taskDescript = $event.detail" />
          </div>
        </div>
        <div class="good-picture">
          <!-- <ze-upload v-model="iteration.pictures" accept="file" style="width: 100%;" type="upload" label="附件" /> -->
          <ze-upload v-model="iteration.pictures" style="width: 100%;" type="upload" label="附件" />
        </div>
        <div>
          <van-field v-model="iteration.startTime" label="日程规划开始时间" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickStartTime" />
          <van-popup :show="showStartTime" position="bottom">
            <van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onStartTime" @cancel="onCancelStartTime" />
          </van-popup>
        </div>
        <div>
          <van-field v-model="iteration.endTime" label="日程规划截止时间" placeholder-style="color:#999;" readonly is-link input-align="right" placeholder="请选择" clickable @click-input="clickEndTime" />
          <van-popup :show="showEndTime" position="bottom">
            <van-datetime-picker type="date" :value="currentDates" :min-date="minDate" :basic-formatter="basicFormatter" @confirm="onEndTime" @cancel="onCancelEndTime" />
          </van-popup>
        </div>
      </div>
      <div class="infoBtn">
        <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitPerson">
          提交
        </van-button>
      </div>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import selectDown from '@/pages/me/select-down.vue'
import Toast from '@/wxcomponents/vant/toast/toast'
import zeUpload from '@/components/ze-oa-form/ze-upload.vue'
export default {
  components: { selectDown, zeUpload },
  data() {
    return {
      iteration: {
        ownExecution: '',
        taskType: '',
        ownModule: '',
        assignedTo: '',
        taskName: '',
        taskDescript: '',
        pictures: [],
        startTime: '',
        endTime: '',
      },
      showStartTime: false,
      showEndTime: false,
      showSubmit: false,
      // 所属执行list
      ownExecutionList: ['执行一', '执行二'],
      // 任务类型
      taskTypeList: ['类型一', '类型二'],
      // 所属模块list
      ownModuleList: ['模块一', '模块二'],
      // 指派给
      assignedToList: ['张三', '李四'],
      currentDate: new Date().getTime(),
      currentDates: new Date().getTime(),
      minDate: new Date(1970, 1, 1).getTime(),
    }
  },
  onLoad() { },
  methods: {
    // 处理控件显示的时间格式
    basicFormatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    // 选择值
    changeValue(val) {
      switch (val.name) {
        case '所属执行':
          this.iteration.ownExecution = val.value
          break
        case '任务类型':
          this.showSubmit = true
          this.iteration.taskType = val.value
          break
        case '所属模块':
          this.iteration.ownModule = val.value
          break
        case '指派给':
          this.iteration.assignedTo = val.value
          break
      }
    },
    // 返回上一页
    onClickLeft() {
      uni.navigateBack()
    },
    // 点击开始时间框
    clickStartTime() {
      this.showStartTime = true
    },
    // 取值开始时间
    onStartTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.startTime = GMT
      this.showStartTime = false
    },
    // 取消开始时间
    onCancelStartTime() {
      this.showStartTime = false
    },
    // 点击完成时间框
    clickEndTime() {
      this.showEndTime = true
    },
    // 取值完成时间
    onEndTime(val) {
      const date = new Date(val.detail)
      const Year = date.getFullYear()
      const Moth = (date.getMonth() + 1 < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1)
      const Day = (date.getDate() < 10 ? `0${date.getDate()}` : date.getDate())
      const GMT = `${Year}-${Moth}-${Day}`
      this.iteration.endTime = GMT
      this.showEndTime = false
    },
    // 取消完成时间
    onCancelEndTime() {
      this.showEndTime = false
    },
    submitPerson() {
      if (this.iteration.ownExecution === undefined || this.iteration.ownExecution.trim().length === 0) {
        Toast('请选择所属执行')
        return
      }
      if (this.iteration.taskType === undefined || this.iteration.taskType.trim().length === 0) {
        Toast('请选择任务类型')
      }
      if (this.iteration.assignedTo === undefined || this.iteration.assignedTo.trim().length === 0) {
        Toast('请填写指派给')
      }

      // uni.setStorageSync('person', this.iteration)
      // uni.navigateTo({
      //   url: '/package-guest/pages/info-regist/info-write/index',
      // })
    },
  },
}
</script>
<style lang="scss" scoped>
.person-info{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .taskForm{
        width: 93%;
        margin: 0 auto;
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
        border-radius: 2px;
    }
    .infoBtn{
        text-align: center;
        padding-top: 15%;
        padding-bottom: 10%;
        width: 80%;
    }
    .headSty{
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        padding: 0px 5px 0px 18px;
        .head-img{
            align-items: center;
            display: flex;
            img:nth-child(1){
                width:28px;
                height:28px;
            }
            img:nth-child(2){
                width:16px;
                height:16px;
            }
        }
    }
    .taskSty{
        padding: 10px 0px 0px 16px;
    }
}
</style>
<style lang="scss">
.good-picture{
    padding-left: 16px;
    padding-right: 6px;
}
.evaluate{
    view .van-cell__title{
        display: none !important;
    }
    view .van-cell__value{
        height: 100px;
        background: #F9F8F8;
    }
    view .van-field__body--textarea{
        height:100%;
    }
}
.moreStyle{
    view {
        label{
            width:100%;
            display: flex;
            white-space: nowrap;
        }
        input{
            padding-right: 3px;
            text-align: right;
        }
        textarea{
            height:100% !important;
            padding-left: 8px;
            padding-top: 4px;
        }
    }
    .van-field__body{
        padding-right: 16px;
    }
}
.taskForm{
    .van-cell{
        padding: 10px 5px 10px 2px !important;
    }
    .van-cell__title{
        min-width:8em !important;
        max-width:8em !important;
        padding-left:16px;
    }
    .van-field__control{
        color:#999 !important;
        font-size: 12px;
    }
    .van-icon:before{
        color:#999;
    }
    .van-field__label{
        color:#333 !important;
        white-space: normal !important;
    }
}
.infoBtn{
    .noSubmit{
        .van-button--round {
            height: 36px;
            width: 75%;
            background: #ccc !important;
            color: #fff !important;
            font-size: 16px !important;
        }
    }
    .submit{
        .van-button--round {
            height: 36px;
            width: 75%;
            background: #029b00!important;
            color: #fff !important;
            font-size: 16px !important;
        }
    }
}
</style>
